<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="./js/axios.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .a img {
        width: 100%;
        height: 100%;
      }
      .b{
          width: 400px;
          height: 500px;
          background-color: aqua;
          position: absolute;
          top: 20%;
          left: 35%;
      }
      .b :nth-child(1){
          width: 300px;
          height: 50px;
          margin-top: 40px;
          margin-left: 50px;
      }
      .b :nth-child(3){
          width: 300px;
          height: 50px;
          margin-top: 40px;
          margin-left: 50px;
      }
      .b :nth-child(5){
          width: 300px;
          height: 50px;
          margin-top: 40px;
          margin-left: 50px;
      }
    </style>
    <div class="a">
      <img
        src="https://img2.baidu.com/it/u=2220565380,2694932281&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=466"
        alt=""
      />
      <div class="b">
        <input type="text" name="" id="unIpt" />
      <span></span>
      
      <input type="text" name="" id="pwIpt" />
      <span></span>
      <button id="btn">登录</button>
      </div>
    </div>

    <script>
        let isUsername = false;
      let unIpt = document.querySelector("#unIpt");
      unIpt.onblur = function () {
        let str = unIpt.value;
        let usernameReg = /^[a-zA-Z]\w{5,17}$/;
        if (usernameReg.test(str)) {
          this.nextElementSibling.innerHTML = "正确";
          isUsername = true;
        } else {
          this.nextElementSibling.innerHTML = "不正确";
          isUsername = false;
        }
      };

      let isPW = false;
      let pwIpt = document.querySelector("#pwIpt");
      pwIpt.onblur = function () {
        let str = pwIpt.value;
        let usernameReg = /^\S{3,18}$/;
        if (usernameReg.test(str)) {
          this.nextElementSibling.innerHTML = "正确";
          isPW = true;
        } else {
          this.nextElementSibling.innerHTML = "不正确";
          isPW = false;
        }
      };

      let btn = document.querySelector("#btn");
      btn.onclick = function () {
        if (isUsername && isPW) {
          //发登录请求
          let username = unIpt.value;
          let password = pwIpt.value;
          let loginAPI = "http://jx.xuzhixiang.top/ap/api/login.php";
          axios
            .get(loginAPI, { params: { username: username, password } })
            .then((r) => {
              console.log(r.data);
              if (r.data.code == 1) {
                console.log("登录成了");
                alert(r.data.msg);
                // ***** {code: ,msg:  ,data :{id,token}}
                console.log(r.data);
                location.href = "index.html";
                // id  发布的
                //username
                // token (登录成功以后 服务器给了 令牌 )

                localStorage.setItem("uid", r.data.data.id);
                localStorage.setItem("token", r.data.data.token);
                localStorage.setItem("username", r.data.data.username);
              }
            });
        }
      };
    </script>
  </body>
</html>
